const PropTypes = require('prop-types');
const React = require('react');
const { View, StyleSheet, Platform } = require('react-native');
const {
    JDDevice,
    JDText,
    JDRouter,
    JDButton,
    JDScrollView
} = require('@areslabs/jdreact-core-lib');
const { NavigationBar } = JDRouter;

class JDRouterExample extends React.Component {
    static contextTypes = {
        router: PropTypes.object
    };

    render() {
        return (
            <View style={styles.wrapper}>
                <NavigationBar Title="JDRouter组件" />
                <JDScrollView style={styles.wrapper}>
                    <View style={styles.content}>
                        <JDText style={styles.text}>演示路由跳转与传递参数，按以下方法传递参数，在跳转页面使用this.props.pqropsName即可取到参数</JDText>

                        <JDText style={styles.text}>
                            点击下面按钮，路由将跳转到View路由
                        </JDText>
                        <JDButton
                            style={styles.btn}
                            onPress={() => {
                                this.context.router['toExample-View']({
                                    title: '传参'
                                });
                            }}>to view</JDButton>

                        <JDText style={styles.text}>
                            点击下面按钮，路由将跳转到View路由
                        </JDText>
                        <JDButton
                            style={styles.btn}
                            onPress={() => {
                                this.context.router.push({
                                    routeName: 'example-View', props: { title: '传参' }
                                });
                            }}>push view</JDButton>


                        <JDText style={styles.text}>
                            点击下面按钮，路由将跳转到View路由，回退将回退到apis路由
                        </JDText>
                        <JDButton
                            style={styles.btn}
                            onPress={() => {
                                this.context.router.reset([
                                    { routeName: 'apis', props: { title: 'apis' } },
                                    { routeName: 'example-View', props: { title: '传参' } }
                                ], 1)
                            }}>reset to view</JDButton>
                        <JDText style={styles.text}>
                            点击下面按钮，JDRouter.jumpTo，跳转到uis
                        </JDText>
                        <JDButton
                            style={styles.btn}
                            onPress={() => {
                                this.context.router.jumpTo({ routeName: 'example-View', props: { title: '传参' } })
                            }}>jumpTo to view</JDButton>
                        <JDText style={styles.text}>
                            replace to view
                        </JDText>
                        <JDButton
                            style={styles.btn}
                            onPress={() => {
                                if (Platform.OS === 'web') {
                                    this.context.router.replace(
                                        'example-View', { title: '传参666' }
                                    )
                                } else {
                                    this.context.router.replace(
                                        { routeName: 'example-View', props: { title: '传参666' } }
                                    )
                                }

                            }}>replace view
                        </JDButton>
                        <JDText style={styles.text}>
                            reset to view and back will exit app
                        </JDText>
                        <JDButton
                            style={styles.btn}
                            onPress={() => {
                                var routes = this.context.router.getCurrentRoutes();
                                this.context.router.reset([
                                    { routeName: 'example-View', props: { title: '传参' } }
                                ], 0)
                            }}>reset view</JDButton>


                    </View>
                </JDScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,

    },
    content: {
        // height: JDDevice.height,

        alignItems: 'center',
        paddingRight: 20,
        paddingLeft: 20,
        marginBottom: 20
    },
    text: {
        fontSize: JDDevice.getFontSize(40),
        margin: 5
    },
    btn: {
        width: 200,
        height: 40,
    }

});

module.exports = JDRouterExample;
